Using GZIP compression on GitLab Pages

While playing around with this new website, I noticed relatively long loading times. By default, GitLab Pages does not seem to use any compression when serving the static files of the website. Let’s confirm this using a quick curl call:

chris@CHRISTIANS:~$ curl -ILH "Accept-Encoding: gzip" https://webd97.de

HTTP/2 200
accept-ranges: bytes
cache-control: max-age=600
content-type: text/html; charset=utf-8
expires: Fri, 19 Oct 2018 20:18:08 UTC
last-modified: Fri, 19 Oct 2018 19:56:45 GMT
vary: Origin
content-length: 12034
date: Fri, 19 Oct 2018 20:08:08 GMT

If you take a closer look at the response headers, you can see that there is no Content-Encoding header although gzip was specified as an accepted encoding in the request and the response body is indeed not compressed.

Compression support in GitLab Pages Link to heading

There does not seem to be any official documentation on compression yet, but an issue in the GitLab CE project shows that it is supported. The catch is that the files need to be precompressed. This means that while GitLab Pages can serve compressed files, it cannot compress them on the fly.

So how does it work? Let’s assume we have the following project structure deployed on GitLab Pages:

.
├── img
│   └── some_image.png
└── index.html

GitLab Pages will of course serve these files if requested, but if there is a compressed version next to it (and the client requests compression), the compressed version will be used. The compressed version of a file must be placed next to it:

.
├── img
│   ├── some_image.png
│   └── some_image.png.gz
├── index.html
└── index.html.gz

With this setup, the compressed files will be used whenever possible.

Adding compression to the GitLab Pages build Link to heading

To enable compression, we need to create static compressed files. Since we are working with static files, it is no problem at all to provide compressed variants of these files. We just need to call gzip for each file. For this website, I implemented this by calling gzip -k -6 $(find public -type f) after the successful Hugo build. The kflags keeps the input files, 6 is the compression level (1-9). Unfortunately, the r (recursive) flag is not supported by the base image, so I had to use a workaround here: find public -type f lists all files in the public directory (created by Hugo) recursively, which are then passed to gzip.

This is what my .gitlab-ci.yml looks like:

image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

test:
  script:
  - hugo
  except:
  - master

pages:
  script:
  - hugo && gzip -k -6 $(find public -type f)
  artifacts:
    paths:
    - public
  only:
  - master

Conclusion Link to heading

Yes, compression of static files in GitLab Pages is possible and the required work is minimal. Go ahead and try it. The reduced file sizes helps a lot with page performance, especially on mobile devices, where bandwith is often limited.